<script setup lang="ts">
import { useUserInfoStore } from '@/store';
import { ref } from 'vue'
const userInfoStore = useUserInfoStore();
const getUserInfo = () => {
  console.log('点击了')
  uni.login({
    provider: 'weixin',
    success: function (loginRes) {
      console.log(loginRes.authResult);
      // 获取用户信息
      uni.getUserInfo({
        provider: 'weixin',
        success: function (infoRes) {
          let form = {
            avatarUrl: infoRes.userInfo.avatarUrl,
            nickName: infoRes.userInfo.nickName
          }
          userInfoStore.setUserInfo(form);
        }
      });
    }
  });
}

// 技术支持
const callPhoneNumber = () => {
  uni.makePhoneCall({
    phoneNumber: "17503237677",
  });
}

// 退出登录
const modalName = ref(null);
const showModal = (e: any) => {
  modalName.value = e.currentTarget.dataset.target
}
// 关闭退出登录弹窗
const hideModal = () => {
  modalName.value = null;
}

// 点击确定按钮时触发
const confirm = () => {
  // 将本地存储key清空
  uni.removeStorageSync('key');
  uni.redirectTo({
    url: '/pages/login/index',
  })
}
</script>

<template>
  <scroll-view scroll-y>
    <view style="background-color: #fafafa;height: 100vh;width: 100vw;">
      <view class="header bg-gradual-blue">
      <view class="toLogin">
        <image :src="userInfoStore.userinfo.avatarUrl" mode="scaleToFill" />
        <view class="text-bold" @click="getUserInfo" v-if="!userInfoStore.userinfo.nickName">请点击登录</view>
        <view class="text-bold" v-else>{{ userInfoStore.userinfo.nickName }}</view>
        <view class="ci-forward" style="font-size: 18px;"></view>
      </view>
    </view>
    <block>
      <view class="cu-list menu card-menu margin-top-lg shadow-shop bg-white text-black my-radius sm-border">
        <view class="cu-item">
          <button class='content cu-btn' open-type="share">
            <image src='../../static/user/icon/weixin.png' class='png' mode='aspectFit'></image>
            <text class='text-lg margin-sm'>分享小程序</text>
          </button>
        </view>
        <view class="cu-item">
          <view class='content' @click="callPhoneNumber" data-number="17503237677">
            <image src='../../static/user/icon/phone.png' class='png' mode='aspectFit'></image>
            <text class='text-lg margin-sm'>技术支持</text>
          </view>
          <view class="action">
            <view class="cu-tag round bg-blue light">175 0323 7677</view>
          </view>
        </view>
        <view class="cu-item">
          <button class='content cu-btn' open-type="feedback">
            <image src='../../static/user/icon/wenti.png' class='png' mode='aspectFit'></image>
            <text class='text-lg margin-sm'>问题反馈</text>
          </button>
        </view>
        <view class="cu-item" data-target="DialogModal1" @tap="showModal">
          <view class='content'>
            <image src='../../static/user/icon/out.png' class='png' mode='aspectFit'></image>
            <text class='text-lg margin-sm'>退出登录</text>
          </view>
        </view>
      </view>
      <view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
        <view class="cu-dialog">
          <view class="cu-bar bg-white justify-end">
            <view class="content">退出登录</view>
            <view class="action" @tap="hideModal">
              <text class="cuIcon-close text-blue"></text>
            </view>
          </view>
          <view class="padding-xl">
            <text>此操作将退出登录, 是否继续!</text>
          </view>
          <view class="cu-bar bg-white justify-center">
            <view class="action">
              <button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
              <button class="cu-btn bg-blue margin-left" @tap="confirm">确定</button>
            </view>
          </view>
        </view>
      </view>
    </block>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>